<template>
    <div>
        <!-- 头部 -->
        <div @click="openEdit">
            <div class="resume_head flex-center-wrap flex-justify-between">
                <div class="flex-center-wrap">
                    <div class="f-38 resume_head_left p-r-15 flex-center-wrap">
                        {{ row.name }}
                    </div>
                    <div class="p-l-15">
                        <div class="f-14 h-26 l-h-26 flex-center-wrap">{{ row.text }}</div>
                        <div class="f-24 h-26 l-h-26">{{ row.text1 }}</div>
                    </div>
                </div>

                <div class="flex-center-wrap p-l-15">
                    <img src="http://47.108.195.190:5000/netdist/image-1732023576961~1~.png" />
                    <img
                        class="m-l-10"
                        src="http://47.108.195.190:5000/netdist/image1-1732023576948~1~.png"
                    />
                </div>
            </div>

            <!-- 头部分界线 -->
            <div class="flex-center-wrap flex-justify-between h-18">
                <div class="line_l bg-c">
                    <i style="border-left-color: #4e7282"></i>
                </div>
                <div class="line_r"><i></i></div>
            </div>
        </div>
        <DialogForm
            v-if="visable"
            v-model="visable"
            title="编辑"
            auto
            width="600px"
            :formConfig="formConfig"
            :formData="formData"
            :rules="rules"
             @confirm="confirm"
        ></DialogForm>
    </div>
</template>

<script>
function createFromConfig() {
    return [
        {
            label: '简历名字',
            type: 'input',
            modelName: 'name',
        },
        {
            label: '简历头部汉字',
            type: 'input',
            modelName: 'text',
        },
        {
            label: '简历头部英文',
            type: 'input',
            modelName: 'text1',
        },
    ]
}
export default {
    components: {
        'e-form': () => import('@/components/async/e-form.vue'),
    },
    props: {
        name: {
            type: String,
            default: '',
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
        row: {
            type: Object,
            default() {
                return {
                    name: '个人简历',
                    text: '细心从每一个细节开始',
                    text1: 'Personal resume',
                }
            },
        },
    },
    data() {
        return {
            visable: false,
            rules: {
                name: [{ required: true, message: '请输入简历名字', trigger: 'blur' }],
                text: [{ required: true, message: '请输入简历头部汉字', trigger: 'blur' }],
                text1: [{ required: true, message: '请输入简历头部英文', trigger: 'blur' }],
            },
            formConfig: createFromConfig(),
            formData: {},
        }
    },
    created() {
        if (this.row.is_need_default) {
            const defaultval = {
                name: '个人简历',
                text: '细心从每一个细节开始',
                text1: 'Personal resume',
            }
            for (const key in defaultval) {
                this.$set(this.row, key, defaultval[key])
            }
        }
        this.$emit('loadSuccess',{
            row_code:this.row.row_code
        })
    },
    methods: {
        openEdit() {
            this.formData = this.deepCopy(this.row)
            this.visable = true
        },
        confirm() {
            this.$emit('update', {
                info: this.formData,
            })
            this.visable = false
        },
    },
}
</script>

<style lang="scss" scoped>
$color: #4e7282;
.bg-c {
    background-color: $color;
}
.border-c {
    border-color: $color;
}
.resume_head {
    padding: 0px 50px 15px 30px;
}
.resume_head_left {
    height: 52px;
    color: $color;
    border-right: 2px solid $color;
}
.f-38 {
    font-size: 38px;
}

.line_l {
    float: left;
    width: calc(70% - 18px);
    background-color: #4e7282;
    height: 18px;
    position: relative;
    i {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 18px 0 0 18px;
        border-color: transparent transparent transparent #4e7282;
        position: absolute;
        left: 100%;
        top: 0;
    }
}
.line_r {
    float: left;
    width: 30%;
    height: 12px;
    margin: 6px 0 0 23px;
    background-color: #c19f67;
    position: relative;
    i {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 12px 0 0 12px;
        border-color: #c19f67 transparent transparent;
        position: absolute;
        left: -12px;
        top: 0;
    }
}
.resume_content_all-main {
    border-left: 1px solid $color;
}
.module_tit {
    position: relative;
    margin-left: -16px;
    display: inline-block;
    vertical-align: top;
    min-width: 140px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
    background-color: #4e7282;
    color: #fff;
    .tit_icon {
        height: 100%;
        width: 50px;
        position: absolute;
        right: -1px;
        top: 0;
        overflow: hidden;
        .line-1 {
            display: block;
            width: 27px;
            height: 50px;
            overflow: hidden;
            border-style: solid;
            border-width: 26px 0 0 26px;
            background-color: #fff;
            position: absolute;
            right: -12px;
            top: -18px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .line-2 {
            border: 2px solid #fff;
            display: block;
            content: '';
            width: 7px !important;
            height: 50px !important;
            position: absolute;
            right: 25px;
            top: -12px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
    .dfn {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid;
        border-width: 9px 0 0 16px;
        border-color: #4e7282 transparent transparent;
        position: absolute;
        left: 0;
        top: 100%;
    }
}
.module_tit-span {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 25px;
    padding-right: 50px;
    background-color: #4e7282;
    color: #fff;
    white-space: nowrap;
    position: relative;
}
.grid-clumn-2 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 10px;
}
.resume_content_main {
    padding: 14px 20px;
}

.dor-ul {
    list-style: disc;
    padding-left: 30px;
}
.dor-li {
    list-style: disc;
    color: #666;
    line-height: 24px;
}
.user-avtor {
    width: 98px;
    height: 114px;
    object-fit: cover;
}
.line_box {
    height: 1px;
}
</style>
